<template>
  <InfoCard title="执法检查" isRight style="height: 400px; margin-top: 19px">
    <template #title>
      <div class="group-cur">
        <div class="cur-month" @click="active = !active"></div>
        <div class="cur-year"></div>
      </div>
    </template>
    <div class="info-law">
      <div class="item">
        <span class="number one">{{
          groupData?.inspectionGroup?.checkTime
        }}</span>
        <span class="law-des law-des-warp">检查企业次数</span>
      </div>
      <div class="item">
        <span class="number two">{{
          groupData?.inspectionGroup?.riskTotal
        }}</span>
        <span class="law-des"> 隐患总数</span>
      </div>
      <div class="item">
        <span class="number three">{{
          groupData?.inspectionGroup?.ratifyTotal
        }}</span>
        <span class="law-des"> 整改隐患数 </span>
      </div>
      <div class="item">
        <span class="number four">{{
          groupData?.inspectionGroup?.ratifyRate
        }}</span>
        <span class="law-des"> 隐患整改率 </span>
      </div>
    </div>
  </InfoCard>
  <InfoCard title="安全承诺公告" isRight style="height: 222px">
    <div class="info">
      <div class="left">
        <div class="con-each">
          <span class="circle-title">已承诺企业</span>
          <div class="num-content">
            <span class="anti-black">{{ groupData?.guarantee?.promise }}</span>
            <span class="unit">家</span>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="con-each">
          <span class="circle-title">未承诺企业</span>
          <div class="num-content">
            <span class="anti-black">{{
              groupData?.guarantee?.unPromise
            }}</span>
            <span class="unit">家</span>
          </div>
        </div>
      </div>
    </div>
  </InfoCard>
  <InfoCard title="企业值班" isRight style="height: 340px">
    <CompanySlider :companyList="companyList"></CompanySlider>
  </InfoCard>
  <InfoCard title="装置开停车及大检查" isRight style="height: 500px">
    <div class="checkbox">
      <table cellpadding="0" cellspacing="0" width="100%">
        <thead>
          <tr>
            <th width="10%">序号</th>
            <th width="25.5%">企业名称</th>
            <th width="34%">装置名称</th>
            <th width="20%">状态</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="person in tableDatas" :key="person.id">
            <td>{{ person.id }}</td>
            <td>{{ person.companyName }}</td>
            <td>{{ person.deviceName }}</td>
            <td>{{ person.status }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </InfoCard>
</template>
<script setup>
import { inject } from 'vue'
import { userightContent } from '../share'
const { tableDatas, companyList, active } = userightContent()
const groupData = inject('groupData')
</script>
<style scoped lang="less">
.group-cur {
  position: absolute;
  top: 0;
  width: 478px;
  height: 44px;
  margin-left: 415px;
  display: flex;
  .cur-month {
    position: relative;
    width: 130px;
    height: 44px;
    opacity: 1;
    cursor: pointer;
    &::before {
      position: absolute;
      width: 130px;
      height: 44px;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      content: '';
      opacity: 1;
      border-radius: 6.27px;
      background: linear-gradient(
          180deg,
          rgba(50, 54, 71, 1) 0%,
          rgba(34, 38, 49, 1) 100%
        ),
        rgba(27, 126, 242, 0.2);
      border: 1.57px solid rgba(46, 227, 255, 1);
      z-index: 1;
      transform: skewX(-35deg);
    }
    &::after {
      position: absolute;
      width: 130px;
      height: 44px;
      content: '本月';
      z-index: 2;
      color: rgba(154, 209, 255, 1);
      font-family: Source Han Sans;
      font-weight: medium;
      font-size: 24px;
      line-height: 44px;
      letter-spacing: 0px;
      text-align: center;
      z-index: 2;
    }
  }

  .cur-year {
    position: relative;
    width: 130px;
    height: 44px;
    margin-left: 26px;
    cursor: pointer;
    &::before {
      position: absolute;
      width: 130px;
      height: 44px;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      content: '';
      opacity: 1;
      border-radius: 6.27px;
      background: linear-gradient(
        180deg,
        rgba(22, 98, 215, 1) 0%,
        rgba(5, 27, 55, 1) 100%
      );
      border: 1.57px solid rgba(46, 227, 255, 1);
      z-index: 1;
      transform: skewX(-35deg);
    }
    &::after {
      position: absolute;
      width: 130px;
      height: 44px;
      content: '本年';
      z-index: 2;
      color: rgba(255, 255, 255, 1);
      font-family: Source Han Sans;
      font-weight: medium;
      font-size: 24px;
      line-height: 44px;
      letter-spacing: 0px;
      text-align: center;
      z-index: 2;
    }
  }
}

.unit {
  color: #9ad1ff;
  font-size: 24;
}
.number {
  display: block;
  font-family: Source Han Sans;
  font-weight: 600;
  font-size: 34px;
  line-height: 24px;
  width: 100%;
  text-align: center;
  margin-bottom: 4px;
}

.num-content {
  display: flex;
  gap: 5px;
  justify-content: start;
  align-items: end;
}
.anti-black {
  display: block;
  font-family: Source Han Sans;
  font-weight: 600;
  font-size: 34px;
  line-height: 24px;
  text-align: left;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 1);
}
.circle-title {
  display: block;
  margin-bottom: 24px;
  text-align: left;
  opacity: 1;
  color: rgba(154, 209, 255, 1);
  font-family: Source Han Sans SC;
  font-weight: bold;
  font-size: 24px;
  line-height: 24px;
  letter-spacing: 0px;
  text-align: left;
}

.orange-unit {
  display: block;
  color: #ff8400;
  font-size: 20px;
  font-weight: 500;
}

.info-law {
  display: flex;
  justify-content: space-between;
  width: 756px;
  height: 297px;
  background: url(@/assets/images/law-group.png) no-repeat;
  background-size: cover;
  .item {
    width: 172.5px;
    padding-top: 161px;
  }

  .one {
    color: rgba(92, 191, 255, 1);
  }

  .two {
    color: rgba(0, 247, 170, 1);
  }

  .three {
    color: rgba(213, 125, 36, 1);
  }

  .four {
    color: rgba(1, 199, 248, 1);
  }
  .law-des {
    display: block;
    width: 100%;
    height: 72px;
    line-height: 72px;
    margin: 0 auto;
    opacity: 1;
    color: rgba(154, 209, 255, 1);
    font-family: Source Han Sans;
    font-weight: regular;
    font-size: 25.12px;
    letter-spacing: 0px;
    text-align: center;
  }

  .law-des-warp {
    width: 108px;
    letter-spacing: 0px;
    text-align: center;
    line-height: normal;
  }
}

.info {
  display: flex;
  justify-content: space-between;
  flex-flow: row nowrap;
  width: 663px;
  height: 132px;
  margin-left: 51px;
  .left {
    position: relative;
    display: flex;
    flex-flow: column;
    width: 325px;
    height: 123px;
    background: url(@/assets/images/safe-public2.png) no-repeat;
    background-size: cover;
  }
  .right {
    position: relative;
    display: flex;
    flex-flow: column;
    width: 325px;
    height: 123px;
    background: url(@/assets/images/safe-public.png) no-repeat;
    background-size: cover;
  }

  .con-each {
    position: absolute;
    left: 170px;
    top: 25px;
    width: 120px;
    height: 0px;
  }
}

/* table */
.checkbox {
  width: 683px;
  height: 306px;
  margin-left: 49px;
  font-size: 20px;
}

thead tr {
  position: relative;
  opacity: 1;
  border-radius: 0px;
  background: linear-gradient(
    0deg,
    rgba(0, 81, 180, 1) 6%,
    rgba(47, 61, 82, 0.09) 100%
  );
}

table td {
  height: 38px;
  line-height: 50px;
  text-align: center;
  color: #fff;
}

table th {
  height: 38px;
  line-height: 50px;
  text-align: center;
  color: #fff;
}
table tbody tr:hover {
  width: 100%;
  height: 50px;
  background: url(@/assets/images/tr-hover.png) no-repeat;
  background-size: cover;
  td {
    background: linear-gradient(
      180deg,
      rgba(230, 247, 255, 1) 0%,
      rgba(38, 166, 221, 1) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
</style>
